<template>
  <div class="con">
    <div class="title">
      <p>基本信息</p>
    </div>
    <ul class="informationList">
      <li class="listLi">
        <div class="attribute">
          车牌号码
        </div>
        <div class="conten">
          <p class="tex">
            {{list.plateNumber}}
          </p>
        </div>
      </li>
      <li class="listLi">
        <div class="attribute">
          VIN码
        </div>
        <div class="conten">
          <p class="tex">
            {{list.vin}}
          </p>
        </div>
      </li><li class="listLi">
        <div class="attribute">
          车型车系
        </div>
        <div class="conten">
          <p class="tex">
            {{list.carStyle}}
          </p>
        </div>
      </li><li class="listLi">
        <div class="attribute">
          发动机号
        </div>
        <div class="conten">
          <p class="tex">
            {{list.engineCode}}
          </p>
        </div>
      </li><li class="listLi">
        <div class="attribute">
          所在地
        </div>
        <div class="conten">
          <p class="tex">
            {{list.storage}}
          </p>
        </div>
      </li><li class="listLi">
        <div class="attribute">
          出厂日期
        </div>
        <div class="conten">
          <p class="tex">
            {{list.produceDate}}
          </p>
        </div>
      </li><li class="listLi">
        <div class="attribute">
          行驶里程
        </div>
        <div class="conten">
          <p class="tex">
            {{list.mileage}} 万公里
          </p>
        </div>
      </li><li class="listLi">
        <div class="attribute">
          注册日期
        </div>
        <div class="conten">
          <p class="tex">
            {{registerDate1}}
          </p>
        </div>
      </li>
      <li class="listLi">
        <div class="attribute">
          排气量
        </div>
        <div class="conten">
          <p class="tex">
            {{list.exhaust}} L
          </p>
        </div>
      </li>
      <li class="listLi">
        <div class="attribute">
          过户说明
        </div>
        <div class="conten">
          <p class="tex">
            {{list.transferIntroduce}}
          </p>
        </div>
      </li>
      <li class="listLi">
        <div class="attribute">
          车身颜色
        </div>
        <div class="conten">
          <p class="tex">
            {{list.carColor}}
          </p>
        </div>
      </li>
      <li class="listLi">
        <div class="attribute">
          交强险说明
        </div>
        <div class="conten">
          <p class="tex">
            {{list.trafficInsurenceIntroduce}}
          </p>
        </div>
      </li>
      <li class="listLi">
        <div class="attribute">
          车辆类型
        </div>
        <div class="conten">
          <p class="tex">
            {{list.vehicleType}}
          </p>
        </div>
      </li>
      <li class="listLi">
        <div class="attribute">
          车船税说明
        </div>
        <div class="conten">
          <p class="tex">
            {{list.travelTaxIntroduce}}
          </p>
        </div>
      </li>
      <li class="listLi">
        <div class="attribute">
          燃油类型
        </div>
        <div class="conten">
          <p class="tex">
            {{list.oilType}}
          </p>
        </div>
      </li>
      <li class="listLi">
        <div class="attribute">
          商业险说明
        </div>
        <div class="conten">
          <p class="tex">
            {{list.businessInsurenceIntroduce}}
          </p>
        </div>
      </li>
      <li class="listLi">
        <div class="attribute">
          使用性质
        </div>
        <div class="conten">
          <p class="tex">
            {{list.useType}}
          </p>
        </div>
      </li>
      <li class="listLi">
        <div class="attribute">
          年检说明
        </div>
        <div class="conten">
          <p class="tex">
            {{list.yearCheckIntroduce}}
          </p>
        </div>
      </li>
    </ul>
    <div class="carImg">
      <p>基本图片</p>
    </div>
    <div class="basicPicture">
      <div class="basicPicture_box">
        <img :src="'http://cheyipai.ucarcloud.cn/auctionCarFile/' + item" alt="" v-for="(item) in basicPictures" :key="item.id">
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      list: {},
      buyCarParams: {},
      basicPictures: [],
      registerDate1: ''
    }
  },
  created () {
    this.buyCarParams = this.$route.query
    this.getFinanceData()
  },
  methods: {
    getFinanceData () {
      // window.scrollTo(0, 0)
      this.buyCarParams = this.$route.query
      this.$http({
        url: 'http://paimai.ucarcloud.cn/auctionCarCore/car/carDetail',
        params: {
          carId: this.buyCarParams.id
        },
        headers: {'from': 'web'}
      }).then(r => {
        this.list = r.data.data
        this.basicPictures = r.data.data.carBasicPic.split(';')
        this.list.produceDate = this.list.produceDate.substring(0, 10)
        this.registerDate1 = this.list.registerDate.substring(0, 10)
        this.list.mileage = (this.list.mileage / 10000).toFixed(2)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.con{
  width: 1200px;
  .title{
    p{
      height: 20px;
      font-size: 16px;
      color: #333;
      padding-left: 6px;
      border-left: 3px solid #ff6f3c;
      line-height: 20px;
      margin: 30px 0;
    }
  }
  .carImg{
    p{
      height: 20px;
      font-size: 16px;
      color: #333;
      padding-left: 6px;
      border-left: 3px solid #ff6f3c;
      line-height: 20px;
      margin: 30px 0;
    }
  }
  .informationList{
    overflow: hidden;
    padding-top: 1px;
    .listLi{
      float: left;
      width: 600px;
      margin-right: -2px;
      margin-top: -1px;
      .attribute{
        float: left;
        width: 118px;
        border: 1px solid #e3e3e3;
        background: #fafafa;
        height: 66px;
        line-height: 66px;
        text-align: center;
        color: #666;
        font-size: 14px;
      }
      .conten{
          margin-left: -1px;
          width: 478px;
          float: left;
          min-height: 66px;
          line-height: 66px;
          border: 1px solid #e3e3e3;
          // display: flex;
          // display: -webkit-box;
          // display: -moz-box;
          // display: -ms-flexbox;
          // display: -webkit-flex;
          // align-items:center;
          // -webkit-align-items:center;
          // box-align:center;
          // -moz-box-align:center;
          // -webkit-box-align:center;
        .tex{
          width: 400px;
          margin: 0 auto 0;
          max-height: 40px;
          overflow: hidden;
          line-height: 20px;
          margin-top: 24px;
        }
      }
    }
  }
  .basicPicture{
    width: 1200px;
    overflow: hidden;
    .basicPicture_box{
      width: 1240px;
      img{
        width: 585px;
        height: 390px;
        margin: 0 30px 30px 0;
      }
    }
  }
}
</style>
